<template>
  <div class="product">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" plain @click="handleAdd">添加分类</el-button>
    <tree-grid
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
    ></tree-grid>
    <el-pagination
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
    ></el-pagination>
    <el-dialog title="添加分类" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm" :rules="myrules" ref="addRef">
        <el-form-item label="分类名称" label-width="90px" prop="cat_name">
          <el-input v-model="addForm.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父类名称" label-width="90px">
          <el-cascader
            change-on-select
            :options="options"
            :props="defaultProps"
            v-model="selectedOptions"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TreeGrid from "@/components/TreeGrid/TreeGrid";
import { categories, addItem } from "@/api";

export default {
  components: {
    TreeGrid
  },
  data() {
    return {
      dataSource: [],
      columns: [
        {
          text: "分类名称",
          dataIndex: "cat_name",
          width: ""
        },
        {
          text: "是否有效",
          dataIndex: "cat_deleted",
          width: ""
        },
        {
          text: "排序",
          dataIndex: "cat_level",
          width: ""
        }
      ],
      pagesize: 10,
      pagenum: 1,
      currentPage: 1, // 默认展示第一页
      totalNum: 0, // 数据总条数，默认为0
      addDialogFormVisible: false,
      addForm: {
        cat_name: "",
        cat_pid: 0, // 默认用户不选择，创建的是一级节点。父id为0
        cat_level: 0 // 默认用户不选择，创建的是一级节点。层级为0
      },
      myrules: {
        cat_name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      },
      options: [], // 级联选择器数据
      selectedOptions: [],
      defaultProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children"
      }
    };
  },
  created() {
    this.initCategories();
  },
  methods: {
    deleteCategory(cid) {
      console.log(cid);
    },
    editCategory(cid) {
      console.log(cid);
    },
    initCategories() {
      categories(3, this.pagenum, this.pagesize).then(res => {
        this.totalNum = res.data.data.total;
        this.dataSource = res.data.data.result;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.initCategories();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.initCategories();
    },
    handleAdd() {
      categories(2).then(res => {
        this.addDialogFormVisible = true;
        this.options = res.data.data;
        this.initCategories();
        this.addForm.cat_name = "";
        this.addForm.cat_pid = 0;
        this.addForm.cat_level = 0;
      });
    },
    confirmAdd() {
      addItem(this.addForm).then(res => {
        if (res.data.meta.status === 201) {
          this.$message.success(res.data.meta.msg);
          this.addDialogFormVisible = false;
          this.initCategories();
          this.addForm.cat_name = "";
          this.addForm.cat_level = 0;
          this.addForm.cat_pid = 0;
          this.selectedOptions = [];
        } else {
          this.$message.error(res.data.meta.msg);
        }
      });
    },
    handleChange(value) {
      if (value.length === 1) {
        this.addForm.cat_level = 1;
        this.addForm.cat_pid = value[0];
      } else {
        this.addForm.cat_level = 2;
        this.addForm.cat_pid = value[1];
      }
    }
  }
};
</script>
